<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hbase</title>
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="dist/js/html5shiv.min.js"></script>
    <script src="dist/js/respond.min.js"></script>
    <![endif]-->

    <script src="dist/js/jquery1.11.1.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="dist/js/util.js"></script>

    <!-- datepicker -->
    <link rel="stylesheet" href="dist/plugins/css/datepicker.css">
    <script type="text/javascript" src="dist/plugins/js/bootstrap-datepicker.js"></script>
    <script>
        $(document).ready(function () {
            var timeFormat = "yyyy-MM-dd HH:mm:ss";
            $('#startTime').datepicker({
                format: timeFormat
            });

            $('#endTime').datepicker({
                format: timeFormat
            });

            $("#send").click(function () {
                $("#data").val("");
                $.ajax({
                    url: "/hbase/history",
                    data: {
                        callLetter: $("#callLetter").val().trim(),
                        startTime: $("#startTime").val().trim(),
                        endTime: $("#endTime").val().trim()
                    },
                    dataType: "json",
                    success: function (result) {
                        $("#data").val(JSON.stringify(result));
                    }
                });
            });

            $("#last").click(function () {
                $("#data").val("");
                $.ajax({
                    url: "/hbase/last",
                    data: {
                        callLetter: $("#callLetter").val().trim()
                    },
                    dataType: "json",
                    success: function (result) {
                        $("#data").val(JSON.stringify(result));
                    }
                });
            });
        });
    </script>
</head>
<body>
<div style="width: 960px;margin: 30px auto;" align="center">
    <label style="font-size: large;font-weight:bold">Hbase信息查询</label>
</div>
<div id="gps" style="width: 960px;margin: 10px auto;">
    <label>设备编号：</label>
    <input id="callLetter" type="text"/>

    <label>开始时间：</label>
    <input id="startTime" type="text"/>

    <label>结束时间：</label>
    <input id="endTime" type="text"/>

    <input id="send" type="button" value="查询"/>
    <input id="last" type="button" value="最后位置"/>
    <hr/>
</div>
<div id="result" style="width: 960px;margin: 20px auto">
    <label>Hbase返回结果：</label>
    <textarea style="width: 960px;height: 600px;margin-top: 20px" id="data"></textarea>
    </br>
</div>
</body>
</html>